<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>图表展示</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .dataBox,.barBox{
            width:100%;
            height:200px;
        }
        #data_a,#data_b,#data_c,#data_d{
            width:249px;
            height:200px;
            border:1px solid #e2e2e2;
            display: inline-block;
            margin-left:10px;
            float:left;
            box-shadow: 2px 2px 3px #888888;
        }
        #app,#app_a{
            width:510px;
            height:300px;
            border:1px solid #236996;
            display: inline-block;
            margin-left:10px;
            float:left;
        }
        .detail_a,.detail_b,.detail_c,.detail_d{
            margin-top:10px;
            width:256px;
            float:left;
        }
        .total_a,.total_b,.total_c,.total_d{
            font-size:60px;
            margin-left:78px;
        }
        .titie_a{
            margin-left:80px;
        }
        .titie_b{
            margin-left:90px;
        }
        .titie_c{
            margin-left:100px;
        }
        .titie_d{
            margin-left:100px;
        }
        .bottom_a,.bottom_b,.bottom_c,.bottom_d{
            width:249px;
            height:100px;
            line-height:140px;
            margin-left:18px;
            font-size:14px;
        }
        .bottom_a a,.bottom_b a,.bottom_c a,.bottom_d a{
            color:#4CB3FF;
        }
        .num_a,.num_b,.num_c,.num_d{
            color: orange;
            font-size:20px;
        }
        .logo,.logo1{
            text-align: left;
            width:234px;
            padding-left:10px;
            height:22px;
            line-height:22px;
            color:white;
            font-size: 10px;
            margin-top:10px;
            display:inline-block;
            background-image: url("../images/log5.png");
            background-repeat: no-repeat;
        }
        .logo{
            margin-left:10px;
        }
        .logo1{
            margin-left:13px;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="logo">累计注册总人数
    </div>
    <div class="logo1">乘梯总人数
    </div>
    <div class="logo1">充值总额
    </div>
    <div class="logo1">消费总额
    </div>
    <div class="dataBox">
        <div id="data_a">
            <div class="detail_a">
                <span class="titie_a">累计注册总人数</span><br/>
                <span class="total_a" id="total_a"></span>
                <div class="bottom_a">昨日新注册人数:<span class="num_a" id="num_a"></span>人&nbsp;<a href="./datail/register.html">查看明细</a></div>
                <a href=""></a>
            </div>
        </div>
        <div id="data_b">
            <div class="detail_b">
                <span class="titie_b">乘梯总人数</span><br/>
                <span class="total_b" id="total_b"></span>
            </div>
            <div class="bottom_b">昨日乘梯人数:<span class="num_b" id="num_b"></span>人&nbsp;<a href="./datail/sum.html">查看明细</a></div>
        </div>
        <div id="data_c">
            <div class="detail_c">
                <span class="titie_c">充值总额</span><br/>
                <span class="total_c" id="total_c"></span>
            </div>
            <div class="bottom_c">昨日充值金额:<span class="num_c" id="num_c"></span>元&nbsp;<a href="./datail/amount.html">查看明细</a></div>
        </div>
        <div id="data_d">
            <div class="detail_d">
                <span class="titie_d">消费总额</span><br/>
                <span class="total_d" id="total_d"></span>
            </div>
            <div class="bottom_d">今日消费金额:<span class="num_d" id="num_d"></span>元&nbsp;<a href="./datail/consume.html">查看明细</a></div>
        </div>
    </div>

    <div class="barBox" style="margin-top:10px;">
        <div id="app"></div>

       <div id="app_a">
           <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;font-size:12px;">
               <legend>最近乘梯记录</legend>
           </fieldset>

           <table class="layui-table" lay-even="" lay-skin="row">
               <colgroup>
                   <col width="90">
                   <col width="90">
                   <col width="90">
                   <col width="90">
                   <col>
               </colgroup>
               <thead>
               <tr>
                   <th>小区名称</th>
                   <th>用户名</th>
                   <th>乘梯时间</th>
                   <th>消费金额</th>
               </tr>
               </thead>
               <tbody class="org-table">
               </tbody>
           </table>
       </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/lift.js"></script>
<script>
    DrawEChart();
    function DrawEChart(){
    var myChart = echarts.init(document.getElementById('app'));
    myChart.showLoading({
        text: "图表数据正在努力加载..."
    });
    app.title = '近期乘梯趋势';
    var option = {
        title: {
            text: '近期乘梯趋势'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:[]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
/*        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },*/
        xAxis: [{
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
            }],
        yAxis: {
            type: 'value'
        },
        series: []
    };
        var user_id =localStorage.getItem("user_id");
        console.log(user_id);
    $.ajax({
        url:'/dataCollection/get7DaysChengtiDetails',
        type:'post',
        dataType:"json",
        data:{
            wuye_id :user_id,
        },
        success:function(response){
            console.log(response);
            if(response){
                option.xAxis[0].data = response.xAxis[0].data;
/*                option.xAxis = response.xAxis;
                console.log(option.xAxis);*/
                option.series = response.series;
                option.series.map(value => {
                    value.type='bar'
                })
                option.legend.data = response.legend.data;
                myChart.hideLoading();
                myChart.setOption(option);
            }
        },
        error:function(response){
            console.log(response);
            alert("网络请求失败...")
        }
    });
    }

    layui.use(['jquery','form','layer'], function(){
        var  $ = layui.jquery;
            layer = layui.layer;

        var table_Idb =localStorage.getItem("table_Idb");
        console.log(table_Idb);

        var params = {};
        params.table_Idb = table_Idb;

        var user_id =localStorage.getItem("user_id");
        console.log(user_id);
        //乘梯
        searchCT();
        function searchCT(){
            $.ajax({
                url: '../../dataCollection/getRecentChengtiDetails',
                type: 'get',
                dataType: 'json',
                data:{
                    wuye_id:user_id,
                    current_page:1,
                    limit:5
                }
            })
                .done(function(response){
                    console.log("getlist",response);

                    if(response.resultCode == '200'){
                        var str= '';
                        console.log(response.page.list.length);

                        if(response.page.list.length){
                            for(var i=0;i<response.page.list.length;i++){
                                str +=
                                    '<tr>'+
                                    '<td>'+ response.page.list[i].building_name +'</td>'+
                                    '<td>'+ response.page.list[i].telphone +'</td>'+
                                    '<td>'+ response.page.list[i].chengti_time+'</td>'+
                                    '<td>'+ response.page.list[i].consume_money+'</td>'+
                                    '</tr>'
                            }
                            $(".org-table").html(str);
                        }else{
                            str = '<tr><td colspan="7">暂无数据</td></tr>';
                            $(".org-table").html(str);
                        }
                    }
                })
                .fail(function(response){
                    console.log("fail",response);
                    if(response.resultCode=='001'){
                        console.log("param is not found");
                    }
                });
        }
        getAll();
        function getAll(){

            $.ajax({
                url: '../../dataCollection/getSumDetails',
                type: 'get',
                dataType: 'json',
                data:{
                    wuye_id:user_id,
                }
            })
                .done(function(response){
                    console.log("综合",response);

                    var total = response.data;
                    var  total_a= document.getElementById("total_a").innerHTML= total.sumRegCount;
                    var  total_b= document.getElementById("total_b").innerHTML= total.sumChengtiCount;
                    var  total_c= document.getElementById("total_c").innerHTML= total.sumRecharge;
                    var  total_d= document.getElementById("total_d").innerHTML= total.sumConsume;
                    var  num_a = document.getElementById("num_a").innerHTML = total.yesterdayRegCount;
                    var  num_b = document.getElementById("num_b").innerHTML = total.yesterdayChengtiCount;
                    var  num_c = document.getElementById("num_c").innerHTML = total.yesterdayRecharge;
                    var  num_d = document.getElementById("num_d").innerHTML = total.yesterdayConsume;
                })
                .fail(function(response){
                    console.log("fail",response);
                    if(response.resultCode=='001'){
                        console.log("param is not found");
                    }
                });
        }
    });
</script>
</body>
